<template>
    <view>
        <!-- 输入框用于关键字搜索 -->
        <input type="text" v-model="searchKeyword" placeholder="请输入搜索关键词" @input="getSuggestions"
               style="margin: 10px; padding: 10px; border: 1px solid #ccc; width: calc(100% - 20px);" />
        <!-- 提示列表 -->
        <view v-if="suggestions.length > 0" class="suggestion-list">
            <view v-for="(suggestion, index) in suggestions" :key="index" @click="selectSuggestion(suggestion)">
                {{ suggestion.title }}
            </view>
        </view>
        <!-- 路线规划按钮 -->
        <view class="route-buttons">
            <button @click="planDrivingRoute">驾车路线</button>
            <button @click="planBikingRoute">骑车路线</button>
            <button @click="planWalkingRoute">步行路线</button>
        </view>
        <map style="height: 100vh; width: 100vw;" :latitude="latitude" :longitude="longitude" :scale="scale"
             :markers="markers" :polyline="polyline"></map>
        <!-- 缩放按钮和记录按钮 -->
        <view class="zoom-buttons">
            <u-button @click="scaleUp" text="+"></u-button>
            <u-button @click="scaleDown" text="-"></u-button>
			 <u-button @click="locate" text="定位"></u-button>
            <!-- <u-button @click="toUrl" text="测试"></u-button> -->
        </view>
        <!-- 导航按钮 -->
       <!-- <button @click="startNavigation" style="position: fixed; bottom: 20px; left: 20px;">导航到目的地</button> -->
    </view>
</template>

<script>
// 引入腾讯地图 SDK
import QQMapWX from "@/pages/utils/qqmap-wx-jssdk.js";
import { debounce } from 'lodash';

export default {
    data() {
        return {
            latitude: 39.9042, // 地图初始纬度
            longitude: 116.4074, // 地图初始经度
            scale: 17, // 地图缩放级别
            markers: [], // 地图标记点
            key: "I3FBZ-2KILT-FRXXE-VLDLV-DGSQ7-VXFH2", // 腾讯地图密钥
            qqmapsdk: '', // 腾讯地图实例
            searchKeyword: '', // 搜索关键词
            startPoint: null, // 起点坐标
            endPoint: null, // 终点坐标
            polyline: [{
                points: [],
                color: '#FF0000', // 路线颜色
                width: 5, // 路线宽度，确保为数字类型
                dottedLine: false // 是否为虚线
            }],
            suggestions: [] // 搜索提示列表
        };
    },
    onLoad() {
        this.getLocationInfo(); // 获取用户位置
        this.mapInit(); // 初始化地图
    },
    methods: {
        // 初始化腾讯地图
        mapInit() {
            this.qqmapsdk = new QQMapWX({
                key: this.key
            });
        },

        // 获取用户位置
        getUserLocation() {
            uni.getSetting({
                success: (res) => {
                    if (res.authSetting['scope.userLocation']) {
                        // 用户授权后，可以直接获取位置
                        this.getLocationInfo();
                    } else {
                        // 用户未授权，请求授权
                        uni.authorize({
                            scope: 'scope.userLocation',
                            success: () => {
                                // 用户同意授权，获取位置
                                this.getLocationInfo();
                            },
                            fail: () => {
                                // 用户拒绝授权，给出提示并引导重新授权
                                uni.showModal({
                                    title: '提示',
                                    content: '你拒绝了地理位置授权，如需使用该功能，请在设置中开启',
                                    success: (modalRes) => {
                                        if (modalRes.confirm) {
                                            uni.openSetting(); // 打开设置页面，手动开启授权
                                        }
                                    }
                                });
                            }
                        });
                    }
                }
            });
        },

        // 获取当前位置信息
        getLocationInfo() {
            const _this = this;
            uni.getLocation({
                type: 'gcj02',
                isHighAccuracy: true,
                success: (res) => {
                    console.log('获取地理位置成功', res);
                    const lat = res.latitude;
                    const lng = res.longitude;

                    // 检查经纬度是否有效
                    if (lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
                        uni.request({
                            url: `https://apis.map.qq.com/ws/coord/v1/translate?locations=${lat},${lng}&type=1&key=${_this.key}`,
                            method: 'GET',
                            success: function (rsp) {
                                if (rsp.data && rsp.data.locations && rsp.data.locations.length > 0) {
                                    const correctedLat = rsp.data.locations[0].lat;
                                    const correctedLng = rsp.data.locations[0].lng;

                                    // 检查校正后的经纬度是否有效
                                    if (correctedLat >= -90 && correctedLat <= 90 && correctedLng >= -180 && correctedLng <= 180) {
                                        _this.latitude = correctedLat;
                                        _this.longitude = correctedLng;
                                        _this.startPoint = [correctedLat, correctedLng]; // 设置起点
                                        _this.markers = [{
                                            id: 1,
                                            latitude: _this.latitude,
                                            longitude: _this.longitude,
                                            title: '当前位置',
                                            width: 30,
                                            height: 50
                                        }];
                                    } else {
                                        console.error('校正后的经纬度无效', correctedLat, correctedLng);
                                        uni.showToast({
                                            title: '校正后的经纬度无效',
                                            icon: 'none'
                                        });
                                    }
                                } else {
                                    console.error('没有找到校正后的经纬度');
                                    uni.showToast({
                                        title: '没有找到校正后的经纬度',
                                        icon: 'none'
                                    });
                                }
                            }
                        });
                    } else {
                        console.error('获取的经纬度无效', lat, lng);
                        uni.showToast({
                            title: '获取的经纬度无效',
                            icon: 'none'
                        });
                    }
                },
                fail: (err) => {
                    console.error('获取位置失败：', err);
                    uni.showToast({
                        title: '获取位置失败',
                        icon: 'none'
                    });
                }
            });
        },

        // 获取搜索提示
        getSuggestions() {
            if (this.searchKeyword) {
                this.qqmapsdk.getSuggestion({
                    keyword: this.searchKeyword,
                    success: (res) => {
                        if (Array.isArray(res.data) && res.data.length > 0) {
                            this.suggestions = res.data;
                        } else {
                            this.suggestions = [];
                        }
                    },
                    fail: (err) => {
                        console.error('搜索提示失败', err);
                    }
                });
            } else {
                this.suggestions = [];
            }
        },

        // 选择提示
        selectSuggestion(suggestion) {
            this.searchKeyword = suggestion.title;
            this.suggestions = [];
            const lat = suggestion.location.lat;
            const lng = suggestion.location.lng;
            // 检查经纬度是否有效
            if (lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
                this.latitude = lat;
                this.longitude = lng;
                this.endPoint = [lat, lng]; // 设置终点
                this.markers = [
                    {
                        id: 1,
                        latitude: this.startPoint[0],
                        longitude: this.startPoint[1],
                        title: '当前位置',
                        width: 30,
                        height: 50
                    },
                    {
                        id: 2,
                        latitude: lat,
                        longitude: lng,
                        title: suggestion.title,
                        width: 30,
                        height: 50
                    }
                ];
                // 清空路线
                this.polyline[0].points = [];
            } else {
                console.error('返回的经纬度无效', lat, lng);
                uni.showToast({
                    title: '返回的经纬度无效',
                    icon: 'none'
                });
            }
        },

        // 通用路线规划方法
        getRoute(mode) {
            const _this = this;
            if (_this.startPoint && _this.endPoint) {
                _this.qqmapsdk.direction({
                    mode: mode,
                    from: `${_this.startPoint[0]},${_this.startPoint[1]}`,
                    to: `${_this.endPoint[0]},${_this.endPoint[1]}`,
                    success: function (res) {
                        console.log(res);
                        const ret = res;
                        if (ret.result && ret.result.routes && ret.result.routes.length > 0) {
                            const coors = ret.result.routes[0].polyline, pl = [];
                            // 坐标解压（返回的点串坐标，通过前向差分进行压缩）
                            const kr = 1000000;
                            for (let i = 2; i < coors.length; i++) {
                                coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
                            }
                            // 将解压后的坐标放入点串数组pl中
                            for (let i = 0; i < coors.length; i += 2) {
                                pl.push({ latitude: coors[i], longitude: coors[i + 1] });
                            }
                            console.log(pl);
                            // 设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
                            _this.polyline[0].points = pl;
                        } else {
                            console.error('未获取到有效路线数据', ret);
                            uni.showToast({
                                title: '未获取到有效路线数据',
                                icon: 'none'
                            });
                        }
                    },
                    fail: function (error) {
                        console.error(error);
                    },
                    complete: function (res) {
                        console.log(res);
                    }
                });
            } else {
                uni.showToast({
                    title: '请先定位起点和终点',
                    icon: 'none'
                });
            }
        },

        // 驾车路线规划
        planDrivingRoute() {
            this.getRoute('driving');
        },

        // 骑车路线规划
        planBikingRoute() {
            this.getRoute('bicycling');
        },

        // 步行路线规划
        planWalkingRoute() {
            this.getRoute('walking');
        },

        // 导航到目的地
        startNavigation() {
            const _this = this;
            if (_this.startPoint && _this.endPoint) {
                uni.openLocation({
                    latitude: _this.endPoint[0],
                    longitude: _this.endPoint[1],
                    name: _this.markers[1] ? _this.markers[1].title : '目的地',
                    address: _this.markers[1] ? _this.markers[1].title : '目的地',
                    success: (res) => {
                        console.log('导航成功', res);
                    },
                    fail: (err) => {
                        console.error('导航失败', err);
                        uni.showToast({
                            title: '导航失败',
                            icon: 'none'
                        });
                    }
                });
            } else {
                uni.showToast({
                    title: '请先定位起点和终点',
                    icon: 'none'
                });
            }
        },

        // 缩放级别增加
        scaleUp() {
            if (this.scale < 20) {
                this.scale++;
            } else {
                uni.showToast({
                    title: '已达到最大缩放级别',
                    icon: 'none'
                });
            }
        },

        // 缩放级别减少
        scaleDown() {
            if (this.scale > 3) {
                this.scale--;
            } else {
                uni.showToast({
                    title: '已达到最小缩放级别',
                    icon: 'none'
                });
            }
        },
        toUrl() {
            uni.navigateTo({
                url: '/pages/map/test'
            })
        },
		// 定位按钮点击事件
		    locate() {
		      this.getUserLocation();
		    }
    }
};
</script>

<style scoped>
.suggestion-list {
    margin: 0 10px;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #fff;
}

.suggestion-list view {
    padding: 10px;
    cursor: pointer;
}

.suggestion-list view:hover {
    background-color: #f0f0f0;
}

.route-buttons {
    display: flex; /* 使用 flex 布局 */
    justify-content: space-around; /* 平均分布按钮 */
    margin: 10px;
}

.route-buttons button {
    flex: 1; /* 让按钮平均分配宽度 */
    margin: 0 5px; /* 给按钮添加左右间距 */
}

.zoom-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
}

.zoom-buttons button {
    padding: 10px;
}
</style>